<template>
  <div class="head">
    <div class="container">
      <div class="row gutter">
        <!-- Logo -->
        <div class="col-2">
          <logo />
        </div>
        <!-- 搜索框 -->
        <div class="col-8">
          <!-- 搜索框 购物车展示 -->
          <div class="head-middle">
            <div class="row gutter">
              <!-- 搜索框 -->
              <div class="col-9">
                <div class="search">
                  <input type="text" />
                  <button>搜索</button>
                </div>
                <ul class="head-keywords">
                  <li v-for="(item, index) in 6" :key="index">
                    <nuxt-link to="/">网游竞技</nuxt-link>
                  </li>
                </ul>
              </div>
              <!-- 购物车 -->
              <div class="col-3">
                <cart />
              </div>
            </div>
          </div>
          <!-- 搜索推荐 -->
          <ul class="head-menus">
            <li v-for="(item, index) in 9" :key="index">
              <nuxt-link to="/">品牌闪购</nuxt-link>
            </li>
          </ul>
        </div>
        <!-- 广告图片 -->
        <div class="col-2">
          <img
            src="https://img12.360buyimg.com/babel/jfs/t1/87139/10/14729/47100/5e699d74E357b0b8b/a9fe9098556aa9c0.png.webp"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from "~/components/Logo";
import cart from "~/components/cart";
export default {
  components: {
    Logo,
    cart
  }
};
</script>

<style lang="scss">
.head {
  padding: 10px 0;
  background: #fff;
  &-middle {
    padding-bottom: 30px;
  }
  &-menus {
    li {
      display: inline-block;
      margin: 0 10px;
      font-size: 16px;
    }
  }
  &-keywords {
    li {
      display: inline-block;
      margin: 5px;
    }
  }
  .search {
    input {
      float: left;
      width: 90%;
      padding: 7px 10px;
      border: 2px solid red;
    }
    button {
      padding: 8px 15px;
      color: #fff;
      border: 0;
      background: red;
    }
  }
}
</style>